<div class="content">
  <div class="default-header">
    <div class="row">
      <h1 class="col">IOS router templates</h1>
      <button
        *ngIf="server"
        class="top-button"
        class="cancel-button"
        routerLink="/server/{{ server.id }}/preferences"
        mat-button
      >
        Back
      </button>
      <button
        *ngIf="server"
        class="top-button"
        routerLink="/server/{{ server.id }}/preferences/dynamips/templates/addtemplate"
        mat-raised-button
        color="primary"
      >
        Add IOS router template
      </button>
    </div>
  </div>
  <app-empty-templates-list *ngIf="!iosTemplates.length"></app-empty-templates-list>
  <div class="default-content" *ngIf="iosTemplates.length">
    <div class="listcontainer mat-elevation-z8">
      <mat-nav-list *ngIf="server">
        <div class="list-item" *ngFor="let template of iosTemplates">
          <mat-list-item class="template-name" routerLink="{{ template.template_id }}">{{
            template.name
          }}</mat-list-item>
          <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
            <mat-icon>more_vert</mat-icon>
          </button>
          <mat-menu #menu="matMenu">
            <button mat-menu-item (click)="deleteTemplate(template)">
              <mat-icon>delete</mat-icon><span>Delete</span>
            </button>
            <button mat-menu-item (click)="copyTemplate(template)">
              <mat-icon>content_copy</mat-icon><span>Copy</span>
            </button>
          </mat-menu>
        </div>
      </mat-nav-list>
    </div>
  </div>
</div>
<app-delete-template #deleteComponent [server]="server" (deleteEvent)="onDeleteEvent()"> </app-delete-template>
